<template>
    <div class="treeSelect" >

      <el-select style="width: 100%" v-model="modelDl" placeholder="请选择" clearable  @clear="clear"  @change="selectChange" ref="selectReport">
        <el-option :value="modelDl" class="option" style="height: auto" >
          <el-tree :data="dataList" :props="defaultProps"  @node-click="treeClick"></el-tree>
        </el-option>
      </el-select>
    </div>
</template>

<script>
  import { treeselect } from '@/api/system/dept'
  import  {deviceType,deviceRepo} from '@/api/device/index'
  export default {
    name: 'treeSelect.vue',
    props:[
      'type',
      'model',
      'leibie'
    ],
    watch:{
      model(){
        this.modelDl = this.model
      }
    },

    data(){
      return{
        num:'',
        typeDl:'',
        modelDl:'',
        defaultProps: { },
        title:'',
        dataList:[],
        selectData:'',
      }
    },
    created() {
      this.num=this.leibie
      this.typeDl = this.type
      this.modelDl = this.model

      if(this.typeDl=='deviceType') {
        this.title='deviceType';
        this.defaultProps= {
          children: "list",
          label: "deviceName"
        };
        this.getDeviceType()
      }else if(this.typeDl=='department'){
        this.title='department';
        this.defaultProps= {
          children: "children",
          label: "label"
        };
        this.getDepartment()
      }else if(this.typeDl=='deviceRepo'){
        this.title='deviceRepo';
        this.defaultProps= {
          children: "deviceRepositoryTreeVoList",
          label: "repoName"
        };
        this.getDeviceRepo()
      }
    },
    methods:{
      /** 查询设备分类*/
      async getDeviceType(){
        let res=await deviceType()
        this.dataList=res.rows
      },
      /** 查询部门*/
      async getDepartment(){
        let res=await treeselect()
        this.dataList=res.data
      },
      /** 查询存放位置*/
      async getDeviceRepo(){
        let res=await deviceRepo()
        this.dataList=res.rows
      },
      clear(){
        // this.selectData=[]
      },
      treeClick(data){
        if(this.typeDl=='deviceType') {
          this.modelDl=data.deviceName
        }else if(this.typeDl=='department'){
          this.modelDl=data.label
        }else if(this.typeDl=='deviceRepo'){
          this.modelDl=data.repoName
        }
        this.selectData=data
        this.selectData.num= this.num
        this.$emit(this.title,this.selectData)
        this.$refs.selectReport.blur()
      },
      selectChange(){
        if(!this.modelDl){
          this.selectData=[]
        }

        console.log('this.selectData',this.selectData)
        this.$emit(this.title,this.selectData)

      }
    },
  }
</script>

<style scoped>

</style>
